import React, { Component, ComponentClass } from 'react';
import {Image, Navigator, View} from '@tarojs/components'
import {connect} from 'react-redux'
import {
  CityLocation as CityLocationType,
  Good,
} from '../../utils/server.interface'
import {user} from '../../utils/user.service'
import {http} from "../../utils/http";
import {INDEX_GOODS,} from "../../constants/api";
import Headercar from "../components/header-car/header-car";
import {getHeadTop, vcmonitor} from "../../utils/tools";
import SmallGoodsBox from "../../components/small-goods-box/small-goods-box";
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import './success.scss'

type PageStateProps = {
  location: CityLocationType
}
type PageDispatchProps = {}
type PageOwnProps = {}
type PageState = {
  loadMoreStatus: 'more' | 'noMore' | 'loading'
  searchBarTop: number
  pay: number
  typeName: string
  limit: number
  list: Good[]
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Index {
  props: IProps
}

@connect(({location}) => ({
  location
}), (dispatch) => ({}))

class Index extends Component {
  state: PageState = {
    loadMoreStatus: 'loading',
    searchBarTop: 0,
    pay: 0,
    typeName: '',
    limit: 10,
    list: []
  }
  page = 1
  shareParams = ''
  async componentDidShow() {
    vcmonitor(this);
  }
  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    this.shareParams = await user.getSellerParams()
    const headTop = getHeadTop()
    const searchBarTop = headTop.statusBar > 20 ? (headTop.statusBar + headTop.top + 30) : (headTop.statusBar + headTop.top + 40)
    const {pay = 0} = Taro.getCurrentInstance().router.params
    const {typeName} = Taro.getCurrentInstance().router.params
    this.setState({pay, typeName, searchBarTop}, async () => {
      const list = await this.getAdds(this.page)
      this.setState({list})
    })
  }

  async getAdds(page = 1) {
    const {limit} = this.state
    const indexGoods = await http.post(INDEX_GOODS, {p: page, k: '', areaId: this.props.location.region_id, order: 0})
    if (indexGoods) {
      if (indexGoods.list.length < limit) {
        this.setState({loadMoreStatus: 'noMore'})
      } else {
        this.setState({loadMoreStatus: 'more'})
      }
      return indexGoods.list
    } else {
      return []
    }
  }

  async onReachBottom() {
    if (this.state.loadMoreStatus != 'noMore') {
      this.setState({loadMoreStatus: 'loading'})
      const old = this.state.list
      this.page++
      const newData = await this.getAdds(this.page)
      this.setState({list: [...old, ...newData]})
    }
  }

  render() {
    const {typeName,loadMoreStatus, pay, searchBarTop, list} = this.state

    return (
      <View className='success-order-root'>
        <GzhAuth />
        {process.env.TARO_ENV==='h5'?
          <View className='head-bg' style='height: 0Px;'>
            <Headercar color='white' title=' ' tabColor='#fff' backgroundColor='none' bcolor='#fff'></Headercar>
          </View>
          :
          <View className='head-bg' style={`height: ${searchBarTop}Px;`}>
            <Headercar color='white' title=' ' tabColor='#fff' backgroundColor='none' bcolor='#fff'></Headercar>
          </View>}
        <View className='pay-success'>
          <View className='pay-status'>
            <Image src='https://resource.ivcheng.com/resources/images/success_pay.png'></Image>
            提交成功
          </View>
        </View>
        <View className='pay-info'>
          <Navigator url='/pages/index/index' openType='switchTab' className='go-info'>
            返回首页
          </Navigator>
          <Navigator url='/page/my/teamappoint/supplier/list' className='go-info'>
            团队预约单
          </Navigator>
        </View>

        {list.length > 0 && <View className='recommend-goods-box'>
          <View className='good'>
            <SmallGoodsBox data={list}></SmallGoodsBox>
          </View>
        </View>}
      </View>
    )
  }
}

export default Index as ComponentClass<PageOwnProps, PageState>
